<template>
  <canvas ref="canvas"></canvas>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted() {
    this.canvas = this.$refs.canvas;
    this.ctx = this.canvas.getContext('2d');
    this.canvas.width = 400; // 设置画布宽度
    this.canvas.height = 400; // 设置画布高度
    this.drawWeightScale();
  },
  methods: {
    drawWeightScale() {
      const canvas = this.canvas;
      const ctx = this.ctx;
      const centerX = canvas.width / 2; // 圆心的 x 坐标
      const centerY = canvas.height / 2; // 圆心的 y 坐标
      const radius = 150; // 圆的半径

      // 绘制上弧线
      ctx.beginPath();
      ctx.arc(centerX, centerY - radius, radius, Math.PI, 2 * Math.PI);
      ctx.stroke();

      // 绘制下弧线
      ctx.beginPath();
      ctx.arc(centerX, centerY + radius, radius, 0, Math.PI);
      ctx.stroke();

       // 内部刻度相关参数
      const tickHeight = 10; // 刻度高度
      const tickSpacing = 10; // 刻度之间的间隔
      const tickCount = 20; // 刻度的数量

      // 计算刻度线的起始和结束位置的 y 坐标
      const startY = centerY - radius + tickHeight; // 刻度线起始位置的 y 坐标
      const endY = centerY + radius - tickHeight; // 刻度线结束位置的 y 坐标

      // 计算每个刻度的间隔距离
      const tickInterval = (endY - startY) / tickCount;

      // 绘制刻度线
      for (let i = 0; i <= tickCount; i++) {
        const y = startY + i * tickInterval;

        ctx.beginPath();
        ctx.moveTo(centerX - tickHeight, y);
        ctx.lineTo(centerX + tickHeight, y);
        ctx.stroke();
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

</style>
